<template>
     <div class="box_alarm">
        <MoodalTitle :title="'物联网智能识别的案件上报次数的趋势'">
        </MoodalTitle>
        <div class="box_charts" ref="intelligentfication"></div>
    </div>
</template>
<script>
import {ZhiShiJianGuan} from '@/api/zhangzi/index'
import MoodalTitle from '@/components/ModalTitle/Index.vue'
export default {
    components: { MoodalTitle },
    data() {
        return {}
    },
    mounted() { 
        this.intelligentfData() 
    },
    methods: {
        // 物联网智能识别的案件上报次数的趋势
        intelligentfData() {
            let recentOrders = []
            let Hour = [] //时间
            ZhiShiJianGuan.getTimeTrend1().then(res => {
                console.log(res , '物联网智能识别的案件上报次数的趋势');
                if(res.code == 200){
                    res.data.forEach(item => {
                        recentOrders.push(item.recentOrders)
                        Hour.push(item.hour.split(' ')[1])
                    })
                this.intelligentfication(recentOrders,Hour)
                }
            })
        },
        intelligentfication(recentOrders,Hour) {
            let charts = echarts.init(this.$refs.intelligentfication)
            let dataC1 = recentOrders;
            let xData = Hour;

           let option = {
                grid: {
                    left: '10%',
                    // right: '2%',
                    top: '15%',
                    bottom: '15%',
                },
                legend: {
                    textStyle: {
                        color: '#A9DDEE',
                    },
                    orient: 'horizontal',
                    top: '5',
                    right: '2%',
                    itemGap: 10,
                    itemWidth: 12,
                    itemHeight: 7,
                },

                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line',
                        lineStyle: {
                            color: '#57617B',
                        },
                    },
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false, //顶头显示
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#3585d5', 
                        },
                    },

                    axisTick: {
                        show: false,
                        // alignWithLabel: true,
                        lineStyle: {
                            color: '#3585d5',
                        },
                    },
                    axisLabel: {
                        fontSize: 14,
                    },
                    data: xData,
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#3585d5',
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: 'rgba(36, 173, 254, 0.2)',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        fontSize: 14,
                    },
                    boundaryGap: true,
                },
                series: [
                    {
                        name: '上报次数',
                        type: 'line',
                        // stack: '总量',
                        smooth: true,
                        symbol: 'none',
                        showSymbol: true,
                        symbolSize: 80,
                        itemStyle: {
                            normal: {
                                color: '#00D6FB',
                                lineStyle: {
                                    color: '#00D6FB', //线的颜色
                                    width: 2,
                                },
                                areaStyle: {
                                    //color: '#94C9EC'
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0.3,
                                            color: 'rgba(56, 177, 193, .6)',
                                        },
                                        
                                        {
                                            offset: 1,
                                            color: 'rgba(30, 29, 40, .1)',
                                        },
                                    ]),
                                },
                            },
                        },
                        data: dataC1,
                    },
                ],
            };

            charts.setOption(option)
        }
    }
}
</script>

<style lang="less" scoped>
.box_alarm {
    position: relative;
    width: 49.6rem;
    height: 32rem !important;
    margin-bottom: 1.9rem;
}

.box_charts {
    // position: absolute;
    // left: 0.9rem;
    // top: 7rem;
    width: 45rem;
    height: 24rem
    // height: 22rem;
}
</style>